<template>
  <div class="Complain">
    <el-container>
      <el-header style="width:60%;margin-top: 30px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="状态">
          <el-select v-model="formInline.complainState" placeholder="状态" >
<!--            style="height:50px;width: 100px"-->
            <el-option label="已处理" value="已处理"></el-option>
            <el-option label="未处理" value="未处理"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="onSubmit">查询</el-button>
        </el-form-item>
        </el-form>
      </el-header>
      <div style="height: 1px"></div>
      <el-main style="width:70%;margin: 0 auto;margin-top:20px;height:100%;margin-right:250px">
        <el-table
            :data="tableData"
            border
            style="width: 100%">
          <el-table-column
              fixed
              prop="cardNum"
              label="水卡卡号"
              width="200">
          </el-table-column>
          <el-table-column
              prop="complainType"
              label="投诉类型"
              width="200">
          </el-table-column>
          <el-table-column
              prop="complainStartDate"
              label="投诉时间"
              width="200">
          </el-table-column>
          <el-table-column
              prop="complainTel"
              label="联系电话"
              width="200">
          </el-table-column>
          <el-table-column
              prop="complainState"
              label="状态"
              width="200">
          </el-table-column>
          <el-table-column
              prop="complainMessage"
              label="详细情况"
              width="200">
          </el-table-column>
          <el-table-column
              prop="complainEndDate"
              label="完成时间"
              width="200">
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <el-pagination @current-change='handleJump' :current-page="currPage"
                       layout="prev, pager,jumper,total,next" :total="total" :page-size="size">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Complain",
  methods: {
    //页面跳转
    handleJump(currPageIndex){
      this.query(this.formInline.complainState, currPageIndex);
    },
    //页面搜索
    onSubmit() {
      this.query(this.formInline.complainState, this.currPage);
    },
    // 查询的函数展示所有
    query:function(complainState,currPage){
      var _this=this;
      axios.get("http://localhost:8081/showAll",{
        params:{
          complainState:complainState,

          currPage:currPage
        }

      })
          .then(function(res){
            console.log(res);
            if(res.data.success){
              let data = res.data.data;
              _this.tableData = data.records;
              _this.total = data.total;
              _this.currPage = data.current;
              _this.size=data.size
            }else{
              _this.$message.error('请求错误' + resp.data.message);
            }
          })
          .catch(function (error) {
            this.$message('出错了'+error);
          })
    },
  },
  mounted:function(){
    this.query('',1)
  },
  data() {
    return {
      tableData: [],
      total:0,
      size:0,
      currPage:1,
      formInline: {complainState:''}


    }
  }
}
</script>

<style scoped>

</style>